<template>
    <div class="fr page">
        <div class="sui-pagination clearfix">
            <ul>
               
                <li :disabled="pageNo==1" @click="$emit('currentPage',pageNo-1)">
                    <a>«上一页</a>
                </li>
                
                <li v-if="startAndEndNum.start>=2" @click="$emit('currentPage',1)">
                    <a>1</a>
                </li>
                <li class="dotted" v-if="startAndEndNum.start>=3"><span>...</span></li>
                <li v-for="page in  startAndEndNum.end" :key="page" v-if="page>=startAndEndNum.start" :class="{active:pageNo==page}" @click="$emit('currentPage',page)">
                    <a>{{page}}</a>
                </li>
                <li class="dotted"  v-if="startAndEndNum.end < totalPage - 1"><span>...</span></li>
                <li class="dotted" v-if="startAndEndNum.end < totalPage" @click="$emit('currentPage',totalPage)"><span>{{totalPage}}</span></li>
                <li class="next" :disabled="pageNo==totalPage" @click="$emit('currentPage',pageNo+1)">
                    <a>下一页»</a>
                </li>
            </ul>
            <div><span>共{{total}}页&nbsp;</span></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Pagination',
        // 接收分页器父组件传递的数据
        props:['total','pageSize','pageNo','continues'],
        computed: {
            // 通过父组件传递的数据total(总数据)以及pageSize(每页展示几条数据)可以计算出一共多少页
            totalPage(){
                // 注意:这个需要采用一个向上取整(因有小数) ---向上取整方法Math.ceil
                return Math.ceil(this.total / this.pageSize)
            },
            // 计算出连续页码的数字--计算出开始数字  结束数字
            startAndEndNum(){
                // 把当前页码 连续的页数  总页数解构出来
                const {pageNo,continues,totalPage} = this;
                // 连续页码的开始数字
                // 错误写法:let start = pageNo - 2  这个只能表示[continues只能=5]不能写死 因为需要考虑连续的页码数
                let start = pageNo - parseInt(continues / 2)
                // 连续页码的结束数字
                let end = pageNo + parseInt(continues / 2)
                // 一些不符合条件需要纠正的数字  比如 当前页小于1或2  还有最后两页--考虑的是连续的页数
                if(start < 1){
                    // 开始数字 = 第一页
                    start = 1;
                    // 结束数字 = 连续的页码数
                    end = continues
                } 
                if(end > totalPage){
                    // 结束数字 = 最后一页
                    end = totalPage;
                    // 开始数字 = 总页数 - 连续页码数 + 1
                    start = totalPage - continues + 1
                }
                return {start, end}
                // 测试话的 return {start end}  这里是kv一致 省略v
            }
        }
    }
</script>

<style scoped lang="less">
    .page {
        width: 733px;
        height: 66px;
        overflow: hidden;
        float: right;

        .sui-pagination {
            margin: 18px 0;

            ul {
                margin-left: 0;
                margin-bottom: 0;
                vertical-align: middle;
                width: 490px;
                float: left;

                li {
                    line-height: 18px;
                    display: inline-block;

                    a {
                        position: relative;
                        float: left;
                        line-height: 18px;
                        text-decoration: none;
                        border: 1px solid #e0e9ee;
                        margin-left: -1px;
                        font-size: 14px;
                        padding: 9px 18px;
                        color: #333;
                    }

                    &.active {
                        background-color: #ddd;
                        color: #e1251b;
                        border-color: #fff;
                        cursor: default; 
                    }

                    &.prev {
                        a {
                            background-color: #fafafa;
                        }
                    }

                    &.disabled {
                        a {
                            color: #999;
                            cursor: default;
                        }
                    }

                    &.dotted {
                        span {
                            margin-left: -1px;
                            position: relative;
                            float: left;
                            line-height: 18px;
                            text-decoration: none;
                            background-color: #fff;
                            font-size: 14px;
                            border: 0;
                            padding: 9px 18px;
                            color: #333;
                        }
                    }

                    &.next {
                        a {
                            background-color: #fafafa;
                        }
                    }
                }
            }

            div {
                color: #333;
                font-size: 14px;
                float: right;
                width: 241px;
                margin-top:10px;
            }
        }
    }
</style>